<template lang="html">
    <div :class="$style.tab_con">
      <div :class="$style.tab_name">
        <div :class="$style.rank">排名</div>
        <div
          :class="$style.participator"
          :style="{
            textAlign: showTotal ? 'left' : 'center'
          }">参赛人</div>
        <template v-if="!showTotal">
          <div :class="$style.retraceTitle">最大回撤</div>
          <div :class="$style['week-increase']">周涨幅率</div>
          <div :class="$style['last-week-profit']">上周收益率</div>
        </template>
        <template v-else>
          <div :class="$style['total-profit']">累计收益率</div>
          <div :class="$style['gain-jyb']">获取君元宝</div>
        </template>
      </div>

      <spinner v-if="isLoading" />

      <gj-loadmore
        :bottom-method="loadBottom"
        :auto-fill="false"
        ref="loadmore">
        <div v-if="!showTotal">
          <div
            :class="$style.tab_list"
            v-for="(item, index) in rankList"
            @click="toUserDetail(item)">
            <div :class="[
              $style.trophy2,
              $style.icon, 
              $style[trophyClass(index+1)]
              ]">
              {{index > 2 ? index+1: ''}}
            </div>
            <div :class="$style.person_name2">
              {{ item.nickName }}
            </div>
            <div :class="$style.retracement">
              {{ item.maxDrawdown }}%
            </div>
            <div :class="$style.week_rate">
              {{ item.weekIncreaserate }}%
            </div>
            <div :class="$style.last_week_yield">
              <span :class="[ gameStep === 1 ? $style.redFont: '']">
                {{ item.weekProfit }}%
              </span>
              <!-- <i class='iconfont icon-xiangyou'></i> -->
            </div>
          </div>
        </div>

        <div v-else>
          <div
            :class="$style.tab_list"
            v-for="(item, index) in rankList"
            @click="toUserDetail(item)">
            <div
              :class="[
                $style.trophy1, 
                $style.icon,
                $style[trophyClass(index+1)]
                ]">
              {{index > 2 ? index+1: ''}}
            </div>
            <div :class="$style.person_name1">
              {{ item.NICKNAME }}
            </div>
            <div :class="$style.yield">
              {{ item.total_floatprofit }}
            </div>
            <div :class="$style.jyb_num">
              <span :class="[ gameStep === 2 ? $style.redFont: '']">
                {{ item.WIN_SCORE }}
              </span>
              <!-- <i class='iconfont icon-xiangyou'></i> -->
            </div>
          </div>
        </div>
      </gj-loadmore>

      <subscribe-modal />
    </div>
</template>

<script>
import Spinner from './children/Spinner'
import GjLoadmore from 'components/LoadMore'
import RemoteDAO from 'common/remoteDAO'
import Constant from 'common/Constant'
import SubscribeModal from 'components/modal/SubscribeModal'

export default {
  props: {
    isLoading: false,
    showTotal: {
      type: Boolean,
      default: true
    },
    gameDetail: {
      type: Object,
      default: {}
    },
    isAttend: {
      type: Boolean,
      default: false
    },
    gameStep: {
      type: Number,
      default: 0
    },
    rankList: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data () {
    return {
      dup: 3,
      userCode: localStorage.getItem('userCode')
    }
  },
  computed: {
    duplicateRankList () {
      const _list = []
      for (let i = 0;i < this.dup;i ++) {
        _list.push(...this.rankList)
      }
      return  _list
    }
  },
  components: {
    Spinner,
    GjLoadmore,
    SubscribeModal
  },
  methods: {
    trophyClass (rank) {
      return rank < 4 ? `icon-trophy-${rank}` : `icon-trophy-u`
    },
    // 前往个人主页
    toUserDetail (item) {
      // 判断是否已订阅
      console.info('item', item)
      console.info('teamdetail',)
      RemoteDAO.callUC12008309(this.userCode, "1", "1", "3", 
        "1", "1", "", item.client_id, "0",response => {
          if (response.error == "0") {
            if (response.data.body.length > 0) { // 已订阅
              this.$router.push({
                path: '/game/gameotherdetail',
                query: { 
                  gameId: this.gameDetail.GAME_ID, 
                  gameName: this.gameDetail.GAME_NAME, 
                  userCode: item.client_id, 
                  identity: this.isAttend
                    ? Constant.game.identity.PLAYER
                    : Constant.game.identity.onlooker
                }
              })
          } else { // 未订阅，弹出订阅弹窗
            this.$store.dispatch('setModal', {
              visible: true,
              modalId: 'subscribeModal',
              relationUserCode: item.client_id,
              callback: null
            })
          }
        } else {
          this.$store.dispatch('setTip', {text: response.data})
        }
      });
      console.info(item)
    },
    loadBottom () {
      this.$emit('loadmore')
    },
    bottomLoaded () {
      this.$refs.loadmore.onBottomLoaded()
    },
    bottomAllLoaded () {
      this.$refs.loadmore.onBottomAllLoaded()
    },
    resetLoadMore () {
      this.$refs.loadmore.reset()
    }
  }
}
</script>

<style lang="less" module>
@import '../../assets/less/icon.less';

.flexLayout(@justify-content:center,@align-items:center){
  display: flex;
  justify-content: @justify-content;
  align-items: @align-items;
}
.ellipsis(@-webkit-line-clamp:1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: @-webkit-line-clamp;
  -webkit-box-orient: vertical;
}

.redFont {
  color: #FF3333;
  // font-weight: 900;
}

.tab_con {
  width: 100%;
  background-color: #fff;
  position: relative;
  .tab_name{
    width: 100%;
    height: 34px;
    color: #999999;
    display: flex;
    // justify-content: space-around;
    align-items: center;
    background-image: linear-gradient(to bottom,#ddd, #fff 50%);
    border-bottom: 1px solid #DFDFDF; /*no*/

    .rank {
      flex: 2;
      text-align: center;
    }

    .rank,
    .participator,
    .total-profit,
    .retraceTitle,
    .week-increase,
    .last-week-profit,
    .gain-jyb {
      font-size: 12px;
      line-height: 34px;
    }

    .participator {
      flex: 3;
    }

    .total-profit {
      flex: 2;
    }

    .retraceTitle {
      flex: 3;
      text-align: right;
      margin-left: 5px;
    }

    .week-increase {
      flex: 2;
      min-width: 56px;
      text-align: right;
      margin-left: 6px;
    }

    .last-week-profit {
      flex: 3;
      text-align: center;
    }

    .gain-jyb {
      flex: 2;
    }
  }
}
.retraceTitle {
  // margin-left: 5px;
  position: relative;
  &::after {
    content: '';
    position: absolute;
    right: -13px;
    top: 48%;
    transform: translateY(-50%);
    width: 13px;
    height: 14px;
    background: url('../../assets/images/team/_@2x.png') no-repeat 0/contain;
  }
}
.trophy1,.trophy2{
  width: 41px;
  height: 38px;
}
.tab_list {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #DFDFDF; /*no*/
  background-image: url('../../assets/icons/right.png');
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: 99% center;
  .trophy1{
    flex: 1;
    margin-left: 16px;
    margin-right:15px;
    font-size: 16px;
  }
  .person_name1 {
    flex: 3;
    margin-right: 15px;
    color: #5B4E85;
    .ellipsis(1);
    font-weight: 900;
    font-size: 14px;
  }
  .yield,
  .jub_num {
    font-size: 13px;
  }
  .yield {
    flex: 2;
    .redFont();
  }
  .jyb_num {
    color: #959595;
    position: relative;
    flex: 2;
    text-align: right;
    padding-right: 10px;
    text-align: center;
    i {
      color: #CCCCCC;
      font-weight: 900;
    }
  }
  .trophy2{
    flex: 2;
    margin-left: 5px;
    margin-right:10px;
    font-size: 16px;
  }
  .person_name2 {
    flex: 5;
    margin-right: 8px;
    color: #5B4E85;
    .ellipsis(1);
    font-weight: 900;
    font-size: 14px;
  }
  .retracement,
  .week_rate,
  .last_week_yield {
    font-size: 13px;
  }
  .retracement {
    .redFont();
    flex: 2;
  }
  .week_rate {
    .redFont();
    flex: 3;
    min-width: 62px;
    text-align: center;
  }
  .last_week_yield {
    flex: 3;
    min-width: 70px;
    // margin-right: -5px;
    .redFont();
    i {
      color: #CCCCCC;
    }
  }
}
</style>
